<template>
  <el-card header="设备TOKEN登陆模拟测试">
    <el-form>
      <el-form-item label="设备编号">
        {{ deviceCode }}
      </el-form-item>
      <el-form-item label="1.用户验证">
        <device-login-card @logined="handleLogined" />
      </el-form-item>
      <el-form-item label="2.获取用户令牌">
        <el-button type="primary" @click="handleUser">获取</el-button>
      </el-form-item>
      <el-form-item v-if="user.token" label="用户令牌">
        {{ user.token }}
      </el-form-item>
      <el-form-item label="3.设备登陆">
        <el-button type="primary" @click="deviceLogin">登陆</el-button>
      </el-form-item>
      <el-form-item label="4.设备绑定">
        <el-button type="primary" @click="deviceBind">获取</el-button>
      </el-form-item>
      <el-form-item v-if="device.id" label="设备信息">
        {{ device }}
      </el-form-item>
      <el-form-item label="5.获取绑定卡列表">
        <el-button type="primary" @click="queryDevice">获取</el-button>
        <el-table v-if="cardList.length > 0" :data="cardList">
          <el-table-column label="图片" width="100" align="center">
            <template slot-scope="scope">
              <img class="row-user-avatar" :src="avatar(scope.row)">
            </template>
          </el-table-column>
          <el-table-column prop="code" label="卡号"></el-table-column>
          <el-table-column prop="name" label="昵称"></el-table-column>
          <el-table-column prop="password" label="密码"></el-table-column>
          <el-table-column prop="username" label="账户"></el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="6.获取用户列表">
        <el-button type="primary" @click="queryUser">获取</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import DeviceLoginCard from "./common/DeviceLoginCard.vue";
  import request from "@/utils/request";
  import settings from '@/settings'
  export default {
    name: 'ChargingCarTest',
    components: {
      DeviceLoginCard
    },
    data() {
      return {
        deviceCode: 'IoT-AC-000004379',
        user: {
          username: 'singaporec01',
          password: 'singaporec01',
          token: null
        },
        token: null,
        device: {},
        cardList: []
      }
    },
    methods: {
      handleLogined(data) {
        this.device = Object.assign({}, data)
      },
      handleUser() {
        request({
          method: "get",
          url: "/system/user/profile",
        }).then(res => {
          console.log(res)
          this.user = Object.assign({}, this.user, res.data)
        })
      },
      deviceLogin() {
        const vm = this
        request({
          method: 'post',
          url: '/device/login/user',
          data: this.user
        }).then(res => {
          vm.device = res.data
        })
      },
      deviceBind() {
        const vm = this
        request({
          method: 'post',
          url: '/device/login/bind'
        }).then(res => {
          vm.device = res.data
        })
      },
      avatar(item) {
        return item.avatar ? `${settings.baseUrl}${item.avatar}` : require(`@/assets/images/none.png`)
      },
      queryDevice() {
        const vm = this
        request({
          method: 'get',
          url: '/device/card/device/' + this.device.id
        }).then(res => {
          vm.cardList = [].concat(res.data)
        })
      },
      queryUser() {
        const vm = this
        request({
          method: 'get',
          url: '/system/user/list'
        }).then(res => {
          vm.cardList = [].concat(res.data)
        })
      }
    }
  }

</script>
